<template>
    <div class="playerDetail">
        <div class="player-wrapper">
            <div class="player-inner">
                <mu-appbar title="Title">
                    <mu-icon-button icon='arrow_back'  slot="left" @click='back'/>
                    <div class="play-title">
                        <div class="play-name"><span>{{audio.name}}</span></div>
                        <div class="play-singer">{{audio.singer}}</div>  
                    </div>
                    <mu-icon-button icon='share'  slot="right"/>
                </mu-appbar>
                <div class="bar-line"></div>
                <mu-flexbox orient="vertical" class="main">
                    <mu-flexbox-item order="0">
                    <div class="cd-wrapper" :class="{'cd-play': playing}">
                        <div class="pointer" ></div>
                        <div class="cd-holder" :class="{'cd-rotate': playing}">
                            <div class="cd-mask"></div>
                            <img clsss='cd-img' v-lazy="audio.albumPic" alt="" lazy='loading'>
                        </div>
                    </div>
                        
                    </mu-flexbox-item>
                    <mu-flexbox-item order="1" class="bottom-wrapper">
                        <div class="lyric-holder">
                            <div class="lrc-inner" style="transition: -webkit-transform 0.3s ease-out; transform-origin: 0px 0px 0px;" :style="{'transform':' translate3d(0px,'+ lrcOffset +'px, 0px)'}">
                                <p v-for="(item, index) in afterLrc" :id="'line-'+index" :key="index">{{item.txt}}</p>
                            </div>
                        </div>
                        <div class="process-bar">
                            <div class="pro">
                                <div class="pro-warp">
                                    <mu-slider class="song-slider" v-model="prCurrentTime" @change="changeTime"/>
                                </div>
                                <div class="time">
                                    <div class="cur">{{currentTime|time}}</div>
                                    <div class="total">{{durationTime|time}}</div>
                                </div>
                            </div>
                        </div>
                        <div class="control-bar">
                            <mu-icon-button class="btn d-mode"/>
                            <mu-icon-button class="btn d-prev" @click='pre'/>
                            <mu-icon-button class="btn d-play btn-big" @click='toggleStatus' :class="{'d-pause': playing}"/>
                            <mu-icon-button class="btn d-next" @click='next'/>
                            <mu-icon-button class="btn d-list" @click='showlist' />
                        </div>
                    </mu-flexbox-item>
                </mu-flexbox>
            </div>
        
        </div>
        <div class="mask">
            <div class="album-cover" :style="{'background-image':'url(' + audio.albumPic + ')'}"></div>
            <div class="cover-mask"></div>
        </div>
        <BottomSheet ref="bottomSheet"></BottomSheet>
    </div>
</template>
<script>
import { mapMutations, mapGetters } from 'vuex'
import api from '../api/api.js'
import BottomSheet from '../components/showlist.vue'
export default {
  data(){
      return{
        lazy:'./src/assets/images/default_cover.png',
        lyric: '',
        afterLrc: [],
        lrcIndex: 0
      }
  },
  beforeRouteEnter: (to, from, next) => {
    // 这里判断是否重复打开的同一个歌曲页面
    next(vm => {
      vm.loadLrc(vm.audio.id)
    })
  },
  components: {
    BottomSheet
  },
  computed: {
    ...mapGetters([
      'currentTime',
      'bufferedTime',
      'durationTime',
      'prCurrentTime',
      'audio',
      'playing'
    ]),
    lrcOffset () {
      if (this.afterLrc) {
        // 1、根据时间获得歌词
        var current = Math.round(this.currentTime)
        // 2、根据时间得到歌词
        for (var i = 0; i < this.afterLrc.length; i++) {
          if (this.afterLrc[i].time === current) this.lrcIndex = i
        }
        return -(this.lrcIndex) * 58
      }
    }
  },
  methods:{
      back(){
          this.$router.go(-1)
          this.$store.commit('toggleDetail')
      },
      toggleStatus(){
        if(this.playing){
            this.$store.commit('pause')
            document.getElementById('audioPlay').pause()
        }
        else{
            this.$store.commit('play')
            document.getElementById('audioPlay').play()
        }
      },
      next(){
        //获取歌曲列表然后切换歌曲列表数组的下标，赋值给audio标签的src
        this.$store.commit('playNext')
      },
      pre(){
        //获取歌曲列表然后切换歌曲列表数组的下标，赋值给audio标签的src
        this.$store.commit('playPre')
      },
      changeTime(value){
        var time = (value * this.durationTime) / 100
        this.$store.commit('changeTime', time)
        this.$store.commit('setChange', true)
      },
      showlist(){
          this.$refs.bottomSheet.show()
      },
      loadLrc (id) {
        var self = this
        this.afterLrc = [{'txt': '正在加载中...'}]
        if (!id) {
            this.afterLrc = [{'txt': '这里显示歌词哦！'}]
            return
        }
        this.$http.get(api.getLrc(id)).then((res) => {
            // 1、先判断是否有歌词
            if (res.data.nolyric) {
                this.afterLrc = [{'txt': '暂无歌词'}]
            } else {
                this.lyric = res.data.lrc.lyric
                this.getLrc()
            }
        }, (res) => {
            this.afterLrc = [{'txt': '加载歌词失败'}]
        })
        .catch(function (error) {
            console.log(error)
            self.afterLrc = [{'txt': '报错'}]
        })
      },
      getLrc(){
        if(this.lyric){
            var lrcObj = []
            //先把字符串转化为数组
            var lyrics = this.lyric.split('\n')
            //编写正则匹配
            var timeReg = /\[\d*:\d*((\.|\:)\d*)*\]/g
            //把歌词进行处理以时间和歌词组成一个对象，放入afterLrc数组中
            //在computed方法中根据当前的时间进行匹配歌词，然后查找在数据中的位置计算offset值
            for(var i=0;i<lyrics.length;i++){
                //匹配出时间
                var timeRegExpArr = lyrics[i].match(timeReg)
                 if (!timeRegExpArr) continue
                //匹配出歌词
                var txt = lyrics[i].replace(timeReg, '')
                // 处理时间
                for (var k = 0; k < timeRegExpArr.length; k++) {
                    var array = {}
                    var t = timeRegExpArr[k]
                    /*eslint-disable */
                    var min = Number(String(t.match(/\[\d*/i)).slice(1))
                    var sec = Number(String(t.match(/\:\d*/i)).slice(1))
                    /*eslint-enable */
                    var time = min * 60 + sec
                    array.time = time
                    array.txt = txt
                    lrcObj.push(array)
                }
            }
            this.afterLrc = lrcObj
        }
      }
  },
  filters: {
    // 时间字符格式化
    time (value) {
      var length = Math.floor(parseInt(value))
      var minute = Math.floor(value / 60)
      if (minute < 10) {
        minute = '0' + minute
      }
      var second = length % 60
      if (second < 10) {
        second = '0' + second
      }
      return minute + ':' + second
    }
  },
  watch: {
    audio (val) {
      this.loadLrc(val.id)
    }
  },
}
</script>
<style lang="less" scoped>
  .playerDetail {
    overflow: hidden;
    min-height: 25rem;
    height: 100%;
    
  }
  .player-wrapper {
    .player-inner {
      position: relative;
      z-index: 2;
      box-sizing: border-box;
    }
    .play-title{
        height: 56px;
        font-size: 16px;
        color: #fff;
        .play-name {
            padding-top: 0.4rem;
            line-height: 1.8;
        }
        .play-singer {
            font-size: 14px;
            color: #a8a7a7;
            text-align: left;
            line-height: 1;
        }
    }
    .main{
        height: 100%
    }
    //修改默认样式
    .mu-appbar {
      background-color: transparent;
    }
    .bar-line {
      display: block;
      bottom: 0 ;
      left: 0;
      display: block;
      width: 100%;
      height: 0.05rem;
      background: radial-gradient(#d3d3d3 -90%, transparent 100%);
    }
    .mu-paper-1 {
      box-shadow: none;
      > .mu-appbar-title {
        text-align: center;
        font-size: 14px;
      }
    }
    .bottom-wrapper{
        padding: 0 1rem 0;
        color: #fff;
        align-items: flex-end;
    }
    //cd样式
    .cd-wrapper{
        position: relative;
        overflow: hidden;
        .pointer {
            position: absolute;
            width: 4rem;
            height: 6rem;
            right: 30%;
            background: url("../assets/images/stick_bg.png") no-repeat left -.4rem;
            background-size: cover;
            z-index: 8;
            -webkit-transition: all 300ms ease-in;
            transition: all 300ms ease-in;
            -webkit-transform-origin: left top;
            transform-origin: left top;
            -webkit-transform: rotate(-20deg);
            transform: rotate(-20deg);
        } 
        .cd-holder{
            position: relative;
            max-width: 65%;
            min-height: 80px;
            padding: .8rem .9rem;
            -webkit-border-radius:50%;
            border-radius: 50%;
            background: rgba(107, 107, 107, 0.3);
            margin: 3rem auto 0;
            .cd-mask {
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                background: url('../assets/images/cd_wrapper.png') no-repeat center center;
                background-size: contain;
            }
            img {
                width: 100%;
                height: 100%;
                min-height: 80px;
                -webkit-border-radius:50%;
                border-radius: 50%;
            }
            img[lazy=loading]{
                background: url('../assets/images/default_cover.png') no-repeat;
                background-size: cover;
            }
            .cd-img {
                -webkit-border-radius:50%;
                border-radius: 50%;
            }
        }
    }
    // cd播放状态样式
    .cd-play {
      .pointer {
        background-position-y: -.7rem;
       -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
      }
    }
    .cd-rotate {
      -webkit-animation: rotating 10s  linear .3s infinite;
      animation: rotating 10s linear .3s infinite;
    }

    .cd-img {
      -webkit-border-radius:50%;
      border-radius: 50%;
    }
    //歌词
    .lyric-holder {
        margin-top: .6rem;
        position: relative;
        overflow: hidden;
        height: 3rem;
        .lrc-inner {
            position: absolute;
            left: 10px;
            right: 10px;
            overflow: hidden;
            p{
                overflow: hidden;
                height: 42px;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-size: 16px;
                color: #fff;
                text-align: center;
            }
        }
    }
    //进度条
    .pro{
        position: relative;
        .pro-warp{
            margin: 0 2rem;
            padding: 1rem 0 0;
            position: relative;
        }
        .time{
            color: #fff;
            font-size: 12px;
            >div{
                position: absolute;
                top: 54%;
                opacity: .5;
            }
            .cur{
                left: 0;
            }
            .total{
                right: 0;
            }
        }
    }
    //控制按钮
    .control-bar { 
        .btn {
            width: 2.6rem;
            height: 2.6rem;
        }
        .d-mode {
        background: url("../assets/images/seq.png") no-repeat;
        background-size: cover;
        }
        .d-prev {
        background: url("../assets/images/prev.png") no-repeat;
        background-size: cover;
        }
        .d-play {
        background: url("../assets/images/play.png") no-repeat;
        background-size: cover;
        }
        .d-pause {
        background: url("../assets/images/pause.png") no-repeat;
        background-size: cover;
        }
        .d-next {
        background: url("../assets/images/next.png") no-repeat;
        background-size: cover;
        }
        .d-list {
        background: url("../assets/images/list.png") no-repeat;
        background-size: cover;
        }
    }
 }
 //背景
 .mask{
     width: 100%;
     height: 100%;
     overflow: hidden;
     position: absolute;
     left: 0;
     top: 0;
     z-index: 1;
    .album-cover{
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 2;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        filter: blur(1.2rem);
        -webkit-filter: blur(1.2rem);
        -webkit-transform: scale(1.05);
    }
    .cover-mask{
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 3;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,.8);
        opacity: 0.7;
    }
 }
 //定义cd旋转动画
 @-webkit-keyframes rotating{
    0% { -webkit-transform:rotate(0deg); }
    100% { -webkit-transform:rotate(360deg); }
  }
  @keyframes rotating {
    0% { transform: rotate(0deg);}
    100% { transform: rotate(360deg);}
  }
</style>
